<template>
  <span :class="obj.clarr" :id="(obj.id = index)"> {{ index + 1 }} : {{ obj.text }}</span>
</template>

<script>
export default {
  props: ['index', 'flagArr'],
  data() {
    return {
      obj: {
        id: '',
        clarr: 'undo',
        text: '未完成'
      }
    }
  },
  watch: {
    flagArr: {
      deep: true,
      handler() {
        if (this.obj.id === this.flagArr.index) {
          this.obj.clarr = this.flagArr.clarr
          this.obj.text = this.flagArr.text
        }
      }
    }
  }
}
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>
